<template>
  <div>
    <div class="header-top">
      <el-dropdown
        class="flex-tops"
        trigger="contextmenu"
        v-for="(item, index) in taglist"
        :key="item.name"
        @command="dees"
        @visible-change="benr(index, $event)"
        ref="keep"
      >
        <el-tag
          effect="plain"
          :class="$route.path == item.path ? 'active' : ''"
          :closable="index !== 0"
          @click="arrs(item.path)"
          @close="handleClose(index)"
        >
          <i v-if="$route.meta.title == item.name"
            ><el-icon><location /></el-icon
          ></i>
          {{ item.name }}
        </el-tag>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              :icon="RefreshRight"
              :command="{ pps: 0, path: item.path, index }"
              >刷新</el-dropdown-item
            >
            <el-dropdown-item
              :icon="Close"
              :command="{ pps: 1, path: item.path, index }"
              >右侧关闭</el-dropdown-item
            >
            <el-dropdown-item
              :icon="CircleClose"
              :command="{ pps: 2, path: item.path, index }"
              >全部关闭</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {
  ArrowRight,
  Location,
  RefreshRight,
  Close,
  CircleClose,
} from "@element-plus/icons-vue";
import mest from "@/router/page";
import router from "@/router";
import { mapActions, mapGetters } from "vuex";
export default {
  components: {
    mest,
    Location,
    ArrowRight,
    RefreshRight,
    Close,
    CircleClose,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["taglist"]), //直接拿到数组
  },
  setup() {
    return {
      mest,
      Location,
      ArrowRight,
      RefreshRight,
      Close,
      CircleClose,
    };
  },
  created() {
    this.addTag(this.$route);
  },
  watch: {
    //通过路由判断追加标签
    $route(val) {
      // console.log(val);  //传递当前路由
      this.addTag(val);
    },
  },
  methods: {
    ...mapActions(["addTag", "handleClose", "arrs", "allDown", "rightDown"]),
    benr(index, event) {
      if (!event) {
        return;
      }
      // 关闭和打开会触发
      this.$refs.keep.find((item, i) => {
        if (index == i) {
          item.handleOpen();
        } else {
          item.handleClose();
        }
      });
    },
    dees(data) {
      // console.log(data);
      let { pps, path, index } = data;
      switch (pps) {
        case 0:
          this.$router.push({ path: "/redirect/" + path });
          break;
        case 1:
          this.rightDown(index);
          break;
        case 2:
          this.allDown();
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scope>
.header-top {
  display: flex;
  width: 100%;
  height: 40px;
  .el-tag {
    color: black;
    margin-left: 8px;
    margin-top: 8px;
  }
}
.active {
  background-color: #409eff;
}
</style>
